<template>
  <div class="content">
    <el-backtop target=".content"></el-backtop>
    <div>
      <el-card class="notice">
        <el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000">
          <el-carousel-item v-for="item in notices" :key="item.id" class="notice_item">
            <img src="@/assets/tz.webp" alt="">
            {{item.content}}
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>
    <div class="block" style="padding-top: 50px">
      <el-carousel height="350px">
        <el-carousel-item  v-for="item in imgs" :key="item">
          <img :src="item" alt="" width="100%" height="100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <el-col v-if="item.num!==0" :span="6" v-for="item in books" :key="item.id" style="margin-bottom: 10px">
          <div  style="border: 1px solid #ccc; padding-bottom: 10px;border-radius: 10px;overflow: hidden;cursor:pointer" @click="$router.push('/front/bookDetail?id='+item.id)">
            <img :src="item.url" alt="" style="width: 100%">
            <div style="text-align: center;color: #666; padding: 10px;cursor:pointer" @click="$router.push('/front/bookDetail?id='+item.id)"><b>{{ item.name }}</b></div>
<!--            <div style="text-align: center;padding: 10px"><el-button type="primary" @click="borrow(item.id)">借阅</el-button></div>-->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>


export default {
  name: "Home",
  data(){
    return{
      imgs:[
        'https://img0.baidu.com/it/u=1811974573,1760613305&fm=253&fmt=auto&app=138&f=PNG?w=400&h=260',
        'https://img2.baidu.com/it/u=39562096,2516145082&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F599b8aa29f43f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668348778&t=3a6e359d27548a156bd22a8f67226b93'

  ],
      books:[],
      notices:[],
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created(){
       this.load()
       this.getNotice()
  },
  methods:{
    load(){
      this.request.get("/book/books").then(res=>{
        console.log(res.data)
        this.books = res.data
      })
    },
    getNotice(){
      this.request.get("/notice/list").then(res=>{
        console.log(25461654651566526516516125)
        console.log(res.data)
        this.notices=res.data
      })
    },
    borrow(id){
      this.request.post("/book/borrow/"+ id +"/"+ this.user.id).then(res=>{
        if (res.code===200){
          this.$message.success("借阅申请提交成功")
          this.load()
        }
      })
    },
  }
}
</script>

<style scoped>

.notice{
  width: 800px;
  height: 50px;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
  z-index: 2;
  padding: 0;

}

.notice /deep/ .el-card__body{
  padding: 0;
}
/*使文字和公告图片在一行*/
.notice_item{
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.notice_item img {
  width: 40px;
  /*height: 16px;*/
  margin: 0 44px 0 32px;
}
/*.content {*/
/*  height: 1000px;*/
/*  overflow-y: scroll;*/
/*}*/
</style>